<template>
  <div>



    <el-container>
      <el-aside class="operation_box" width="300px"
                style="margin-top: 0px; margin-left: 0px; border-right: 1px solid #ddd;">

        <el-tree
            class="tree"
            style="margin-top: 0px;"
            :data="dwoptions"
            node-key="id"
            :expand-on-click-node="false"
            :highlight-current="true"
            @current-change="currentchange2"
            :props="{  label: 'dwname' }"
            :default-expanded-keys="dwtree_expand_keys"
            @node-expand="handleExpand"
            @node-collapse="handleCollapse"
            ref="tree">
        </el-tree>

      </el-aside>
      <el-container style="margin-left: 10px">
        <el-main>
          <div>
            <el-select style="margin-left: 0px" v-model="gx" clearable placeholder="请选择干线" filterable
                       @change="gxchange">
              <el-option
                  v-for="item in gxArr"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
            <el-input style="width: 200px; margin: 0 20px" placeholder="请输入井号" suffix-icon="el-icon-search"
                      v-model="jh"/>
            <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>

            <el-table ref="table" @selection-change="handleSelectionChange" :data="tableData"
                      style="margin-top: 20px;" border stripe >

<!--              <el-table-column prop="id" label="序号" width="60" v-if="true">-->
<!--              </el-table-column>-->
              <el-table-column type="index" label="序号" width="60">
              </el-table-column>
              <el-table-column sortable prop="jh" label="井号" width="120">
                <template slot-scope="scope">
                  <router-link :to="'/cyjk/history?jh='+scope.row.jh" slot="reference" style="color: #20a0ff">{{
                      scope.row.jh
                    }}
                  </router-link>
                </template>
              </el-table-column>
              <el-table-column prop="ip" label="IP" width="180" v-if="false">
              </el-table-column>
              <el-table-column sortable prop="tjYjXxVo.dwObj.dwname" label="单位" width="150">
              </el-table-column>
              <el-table-column sortable prop="tjYjXxVo.gxObj.name" label="干线" width="150">
              </el-table-column>
              <el-table-column sortable prop="cjsj" label="采集时间" width="180">
              </el-table-column>
              <el-table-column sortable prop="jkHy" label="回压" width="100">
              </el-table-column>
              <el-table-column sortable prop="jkTy" label="套压" width="100">
              </el-table-column>
              <el-table-column sortable prop="jkWd" label="温度" width="100">
              </el-table-column>
              <el-table-column sortable prop="hsl" label="含水" width="100">
              </el-table-column>
              <el-table-column sortable prop="jygYw" label="加药罐液位" width="120">
              </el-table-column>
            </el-table>
            <div class="block" style="padding: 5px">
              <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 50, 100, 200, 500, 1000]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
              </el-pagination>
            </div>
          </div>
        </el-main>

      </el-container>
    </el-container>

  </div>

</template>
<script>
import service from "@/utils/request";
import ElementUI from "element-ui";


import VueRouter from 'vue-router'
import HomeView from "@/views/HomeView.vue";


export default {
  created() {
    service.get('/dw/getAll', {}).then(
        response => {
          if (response.data.code == 20000) {
            this.dwoptions = response.data.data
          } else {
            this.$message.error(response.data.message)
          }
        }, error => {
          ElementUI.Message({
            message: error.message,
            type: 'error'
          })
        }
    )

    this.load();
  },
  data() {
    return {
      gx: null,
      gxArr: [],
      dwoptions: [],
      dwval: [],
      dwtree_expand_keys: [1],
      jh: '',
      tableData: [],
      selectedRows: [], // 用来存储选中行的数据
      pageSize: 200,
      total: 100,
      currentPage: 1,
      dialogFormVisible: false,
      formLabelWidth: '120px'
    }
  },
  methods: {
    test() {
      console.log(this.treeval)
    },

    load() {
      service.get('/yjss/getlatestpageBydwgxjh', {
        params: {
          dwid: this.dwval,
          jh: this.jh,
          pagesize: this.pageSize,
          pagenum: this.currentPage,
        }
      }).then(response => {
            if (response.data.code == 20000) {
              this.tableData = response.data.data.records;
              this.total = response.data.data.total;
              this.currentPage = response.data.data.current;
              this.pageSize = response.data.data.size;
            }
          },
          error => {
            ElementUI.Message({
              message: error.message,
              type: 'error'
            })
          }
      );
    },

    handleExpand(data) {
      if (!this.dwtree_expand_keys.includes(data.id)) {
        this.dwtree_expand_keys.push(data.id)
      }
    },
    handleCollapse(data) {
      if (this.dwtree_expand_keys.includes(data.id)) {
        this.dwtree_expand_keys.splice(this.dwtree_expand_keys.indexOf(data.id), 1)
      }
    },
    async currentchange2(nodedata, node) {

      this.gx = null;
      this.dwval = nodedata.id
      service.get('/gx/getlistbydw1', {params: {dwid: nodedata.id}}
      ).then(
          response => {
            if (response.data.code == 20000) {
              this.gxArr = response.data.data;
              this.load()
            } else {
              throw new Error(response.data.message)
            }
          }
      ).catch(
          error => {
            this.$message.error(error.message)
          }
      )

    },
    gxchange(gxval) {
      this.load()
    },

    nodeclick(nodedata, node, com) {
    }
    ,

    filterNode() {

    }
    ,
    handleSelectionChange(selection) {
      // console.log(selection)
      // this.selectedRows = selection.map(row => row._row);
      this.selectedRows = selection
      // console.log(this.selectedRows)
    },

    handleSizeChange(val) {
      this.pageSize = val
      this.load()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.load()
    },



    search() {
      // this.currentPage = 1
      this.load()
    },


  }
}
</script>
<style scoped>
/deep/ .el-tree-node__content {
  height: 40px;
}

/deep/ .el-tree-node__label {
  font: bold 16px/1.5 "Microsoft YaHei";
}
</style>
